import { useState, useRef } from "react";
import { useEvent } from "react-use";
import { MarkdownHooks } from "react-markdown";

const vscode = acquireVsCodeApi();
function App() {
  const [message, setMessage] = useState("");
  const input = useRef<HTMLInputElement>(null);

  useEvent("message", (e: MessageEvent) => {
    setMessage((message) => message + e.data);
  });

  const postMessage = () => {
    vscode.postMessage(input.current?.value);
  };

  return (
    <>
      <p>{message}</p>
      <div className="card">
        <input ref={input}></input>
        <button onClick={postMessage}>Send message</button>
      </div>
      <MarkdownHooks>{message}</MarkdownHooks>
    </>
  );
}

export default App;
